import React from 'react';
import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';
import { Ionicons } from '@expo/vector-icons';
import { ExpenseRecord, ExpenseType } from '@/types';
import { formatDate } from '@/utils/dateUtils';
import { formatCurrency } from '@/utils/currencyUtils';

interface ExpenseCardProps {
  expense: ExpenseRecord;
  onPress?: () => void;
}

export function ExpenseCard({ expense, onPress }: ExpenseCardProps) {
  const getExpenseIcon = (type: ExpenseType) => {
    switch (type) {
      case ExpenseType.FUEL:
        return 'water';
      case ExpenseType.MAINTENANCE:
        return 'construct';
      case ExpenseType.REPAIR:
        return 'car';
      case ExpenseType.OTHER:
        return 'ellipsis-horizontal';
      default:
        return 'help-circle';
    }
  };

  const getExpenseColor = (type: ExpenseType) => {
    switch (type) {
      case ExpenseType.FUEL:
        return '#0ea5e9';
      case ExpenseType.MAINTENANCE:
        return '#10b981';
      case ExpenseType.REPAIR:
        return '#f59e0b';
      case ExpenseType.OTHER:
        return '#8b5cf6';
      default:
        return '#64748b';
    }
  };

  const getExpenseTypeText = (type: ExpenseType) => {
    switch (type) {
      case ExpenseType.FUEL:
        return '加油';
      case ExpenseType.MAINTENANCE:
        return '保养';
      case ExpenseType.REPAIR:
        return '维修';
      case ExpenseType.OTHER:
        return '其他';
      default:
        return '未知';
    }
  };

  const iconName = getExpenseIcon(expense.type);
  const iconColor = getExpenseColor(expense.type);
  const typeText = getExpenseTypeText(expense.type);

  return (
    <TouchableOpacity style={styles.container} onPress={onPress}>
      <View style={styles.iconContainer}>
        <View style={[styles.icon, { backgroundColor: iconColor + '20' }]}>
          <Ionicons name={iconName as any} size={20} color={iconColor} />
        </View>
      </View>
      <View style={styles.content}>
        <View style={styles.header}>
          <Text style={styles.type}>{typeText}</Text>
          <Text style={styles.amount}>{formatCurrency(expense.amount)}</Text>
        </View>
        <View style={styles.details}>
          {expense.location && (
            <Text style={styles.location}>{expense.location}</Text>
          )}
          {expense.mileage && (
            <Text style={styles.mileage}>{expense.mileage}km</Text>
          )}
        </View>
        <Text style={styles.date}>{formatDate(expense.date)}</Text>
      </View>
    </TouchableOpacity>
  );
}

const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    backgroundColor: '#ffffff',
    padding: 16,
    borderRadius: 12,
    marginBottom: 12,
    elevation: 2,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 1 },
    shadowOpacity: 0.05,
    shadowRadius: 2,
  },
  iconContainer: {
    marginRight: 12,
  },
  icon: {
    width: 40,
    height: 40,
    borderRadius: 20,
    justifyContent: 'center',
    alignItems: 'center',
  },
  content: {
    flex: 1,
  },
  header: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    marginBottom: 4,
  },
  type: {
    fontSize: 16,
    fontWeight: '500',
    color: '#1e293b',
  },
  amount: {
    fontSize: 16,
    fontWeight: '600',
    color: '#1e293b',
  },
  details: {
    flexDirection: 'row',
    marginBottom: 4,
  },
  location: {
    fontSize: 14,
    color: '#64748b',
    marginRight: 12,
  },
  mileage: {
    fontSize: 14,
    color: '#64748b',
  },
  date: {
    fontSize: 12,
    color: '#94a3b8',
  },
});
